<template>
  <div class="musiclist">
    <template v-if="list.length > 0">
      <div class="list-item list-header">
        <span class="list-name">歌曲</span>
        <span class="list-artist">歌手</span>
        <span v-if="isDuration" class="list-time">时长</span>
        <span v-else class="list-album">专辑</span>
      </div>
      <div ref="listContent" class="list-content">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          class="list-item"
        >
          <span class="list-num" v-text="index + 1"></span>
          <div class="list-name">
            <span>{{ item.name }}</span>
            <div class="list-menu">
              <mp-icon
                type="play-mini"
                class="hover"
                :size="40"
                @click.stop="selectItem(item, index)"
              ></mp-icon>
            </div>
          </div>
          <span class="list-artist">{{ item.singer }}</span>
          <span v-if="isDuration" class="list-time">
            <!-- 格式化 | format -->
            {{ item.duration % 3600 | format }}
            <mp-icon
              class="hover list-menu-icon-del"
              type="delete-mini"
              :size="40"
            ></mp-icon>
          </span>
          <span v-else class="list-album">{{ item.album }}</span>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="list-no">
        抱歉，出错了，暂时没有音乐。
      </div>
    </template>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from 'vuex'
import { format } from '@/utils/utils'

const LIST_TYPE_ALBUM = 'album'
const LIST_TYPE_DURATION = 'duration'
const LIST_TYPE_PULLUP = 'pullup'

export default {
  name: 'musiclist',
  filters: {
    format
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    listType: {
      type: String,
      default: LIST_TYPE_ALBUM
    }
  },
  methods: {
    listScroll(e) {
      console.log(e)
    },
    // 播放音乐
    async selectItem(item, index, e) {
      let audio = this.getMediaPlayer
      // 播放状态设置为true
      this.setPlayingStateToTrue()
      // 设置当前播放的音乐
      this.setCurrentMusic(item)
      // 设置当前播放音乐的index
      this.setCurrentMusicIndex(index)
      await this.setPlayMusicUrl(item.id)
      audio.src = this.getMusicUrl
      audio.play()
    },
    ...mapMutations(['setPlayingStateToTrue', 'setCurrentMusic', 'setCurrentMusicIndex']),
    ...mapActions(['setPlayMusicUrl'])
  },
  computed: {
    isDuration() {
      return this.listType === LIST_TYPE_DURATION
    },
    ...mapGetters(['getMediaPlayer', 'getMusicUrl'])
  }
}
</script>

<style lang="scss" scoped>
.list-header {
  border-bottom: 1px solid $list_head_line_color;
  color: $text_color_active;

  .list-name {
    padding-left: 40px;
    user-select: none;
  }
}

.list-content {
  width: 100%;
  height: calc(100vh - 250px);
  overflow-x: hidden;
  overflow-y: auto;
  // -webkit-overflow-scrolling: touch;
}

.list-no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 250px);
  color: $text_color;
}

.list-item {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid $list_item_line_color;
  line-height: 50px;
  overflow: hidden;

  &.list-item-no {
    justify-content: center;
    align-items: center;
  }

  .hover {
    cursor: pointer;
    &:hover {
      color: #fff;
    }
  }

  &:not([class*='list-header']):hover {
    .list-name {
      padding-right: 80px;

      .list-menu {
        display: block;
      }
    }

    .list-time {
      font-size: 0;

      .list-menu-icon-del {
        display: block;
      }
    }
  }

  .list-num {
    display: block;
    width: 30px;
    margin-right: 10px;
    text-align: center;
  }

  .list-name {
    position: relative;
    flex: 1;
    box-sizing: border-box;

    & > span {
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    small {
      margin-left: 5px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }

    .list-menu {
      display: none;
      position: absolute;
      top: 50%;
      right: 10px;
      height: 40px;
      font-size: 0;
      transform: translateY(-50%);
    }
  }

  .list-artist,
  .list-album {
    display: block;
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    @media (max-width: 1440px) {
      width: 200px;
    }
    @media (max-width: 1200px) {
      width: 150px;
    }
  }

  .list-time {
    display: block;
    width: 60px;
    position: relative;

    .list-menu-icon-del {
      display: none;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
}
</style>